<template>
  <div class="dataList">
    <el-table
      ref="multipleTableRef"
      :data="dataList"
      style="width: 100%"
      border
      size="small"
    >
      <el-table-column label="所属单位" prop="depId">
        <template #default="scope">
          <div>{{ depIdName(scope.row.depId) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="设备分类" prop="facilitySort" />
      <el-table-column label="设备名称" prop="facilityName">
        <template #default="scope">
          <el-input
            v-model="scope.row.facilityName"
            placeholder="请输入"
            @blur="blurFn(scope.$index, scope.row, 'facilityName')"
            @focus="focusFn(scope.$index, scope.row, 'facilityName')"
          />
        </template>
      </el-table-column>
      <el-table-column label="设备分级" prop="facilityLevel" width="110">
        <template #default="scope">
          <el-select
            v-model="scope.row.facilityLevel"
            filterable
            @blur="blurFn(scope.$index, scope.row, 'facilityLevel')"
            @focus="focusFn(scope.$index, scope.row, 'facilityLevel')"
          >
            <el-option
              v-for="item in facilityLevelList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="规格型号" prop="specificationModel">
        <template #default="scope">
          <el-input
            v-model="scope.row.specificationModel"
            placeholder="请输入"
            @blur="blurFn(scope.$index, scope.row, 'specificationModel')"
            @focus="focusFn(scope.$index, scope.row, 'specificationModel')"
          />
        </template>
      </el-table-column>
      <el-table-column label="设备序列号" prop="facilitySerialNumber">
        <template #default="scope">
          <el-input
            v-model="scope.row.facilitySerialNumber"
            placeholder="请输入"
            @blur="blurFn(scope.$index, scope.row, 'facilitySerialNumber')"
            @focus="focusFn(scope.$index, scope.row, 'facilitySerialNumber')"
          />
        </template>
      </el-table-column>
      <el-table-column label="设备地点" prop="facilityLocations">
        <template #default="scope">
          <el-input
            v-model="scope.row.facilityLocations"
            placeholder="请输入"
            @blur="blurFn(scope.$index, scope.row, 'facilityLocations')"
            @focus="focusFn(scope.$index, scope.row, 'facilityLocations')"
          />
        </template>
      </el-table-column>
      <el-table-column label="资产编号" prop="assetNumber" width="120">
        <template #default="scope">
          <el-input
            v-model="scope.row.assetNumber"
            placeholder="请输入"
            @blur="blurFn(scope.$index, scope.row, 'assetNumber')"
            @focus="focusFn(scope.$index, scope.row, 'assetNumber')"
          />
        </template>
      </el-table-column>
      <el-table-column label="设备状态" prop="facilityState" width="110">
        <template #default="scope">
          <el-select
            v-model="scope.row.facilityState"
            filterable
            @blur="blurFn(scope.$index, scope.row, 'facilityState')"
            @focus="focusFn(scope.$index, scope.row, 'facilityState')"
          >
            <el-option
              v-for="item in facilityStateList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="数量" prop="facilityNumbers">
        <template #default="scope">
          <el-input
            v-model="scope.row.facilityNumbers"
            placeholder="请输入"
            @blur="blurFn(scope.$index, scope.row, 'facilityNumbers')"
            @focus="focusFn(scope.$index, scope.row, 'facilityNumbers')"
          />
        </template>
      </el-table-column>
      <el-table-column label="单位" prop="unit">
        <template #default="scope">
          <el-input
            v-model="scope.row.unit"
            placeholder="请输入"
            @blur="blurFn(scope.$index, scope.row, 'unit')"
            @focus="focusFn(scope.$index, scope.row, 'unit')"
          />
        </template>
      </el-table-column>
      <el-table-column label="供应商/厂家" prop="facilitySupplier" width="120">
        <template #default="scope">
          <el-input
            v-model="scope.row.facilitySupplier"
            placeholder="请输入"
            @blur="blurFn(scope.$index, scope.row, 'facilitySupplier')"
            @focus="focusFn(scope.$index, scope.row, 'facilitySupplier')"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="是/否纳入特许经营权"
        prop="franchising"
        width="140"
      >
        <template #default="scope">
          <el-select
            v-model="scope.row.franchising"
            filterable
            @blur="blurFn(scope.$index, scope.row, 'franchising')"
            @focus="focusFn(scope.$index, scope.row, 'franchising')"
          >
            <el-option label="是" value="是" />
            <el-option label="否" value="否" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="采购价格" prop="purchasePrice">
        <template #default="scope">
          <el-input
            v-model="scope.row.purchasePrice"
            placeholder="请输入"
            @blur="blurFn(scope.$index, scope.row, 'purchasePrice')"
            @focus="focusFn(scope.$index, scope.row, 'purchasePrice')"
          />
        </template>
      </el-table-column>
      <el-table-column label="采购时间" prop="purchaseTime" width="136">
        <template #default="scope">
          <el-date-picker
            v-model="scope.row.purchaseTime"
            type="date"
            clearable
            style="width: 118px"
            placeholder="请选择"
            @blur="blurFn(scope.$index, scope.row, 'purchaseTime')"
            @focus="focusFn(scope.$index, scope.row, 'purchaseTime')"
          />
        </template>
      </el-table-column>
      <el-table-column label="开始使用时间" prop="startTime" width="136">
        <template #default="scope">
          <el-date-picker
            v-model="scope.row.startTime"
            type="date"
            clearable
            style="width: 118px"
            placeholder="请选择"
            @blur="blurFn(scope.$index, scope.row, 'startTime')"
            @focus="focusFn(scope.$index, scope.row, 'startTime')"
          />
        </template>
      </el-table-column>
      <el-table-column label="保修期限" prop="guaranteeTime" width="136">
        <template #default="scope">
          <el-date-picker
            v-model="scope.row.guaranteeTime"
            type="date"
            clearable
            style="width: 118px"
            placeholder="请选择"
            @blur="blurFn(scope.$index, scope.row, 'guaranteeTime')"
            @focus="focusFn(scope.$index, scope.row, 'guaranteeTime')"
          />
        </template>
      </el-table-column>
      <el-table-column label="报废期限" prop="scrapTime" width="136">
        <template #default="scope">
          <el-date-picker
            v-model="scope.row.scrapTime"
            type="date"
            clearable
            style="width: 118px"
            placeholder="请选择"
            @blur="blurFn(scope.$index, scope.row, 'scrapTime')"
            @focus="focusFn(scope.$index, scope.row, 'scrapTime')"
          />
        </template>
      </el-table-column>
      <el-table-column label="是否联网" prop="networking" width="110">
        <template #default="scope">
          <el-select
            v-model="scope.row.networking"
            filterable
            @blur="blurFn(scope.$index, scope.row, 'networking')"
            @focus="focusFn(scope.$index, scope.row, 'networking')"
          >
            <el-option label="是" value="是" />
            <el-option label="否" value="否" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        label="主要技术参数"
        prop="technicalParameter"
        width="100"
      >
        <template #default="scope">
          <el-input
            v-model="scope.row.technicalParameter"
            placeholder="请输入"
            @blur="blurFn(scope.$index, scope.row, 'technicalParameter')"
            @focus="focusFn(scope.$index, scope.row, 'technicalParameter')"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="主要零部件及参数"
        prop="partsParameters"
        width="130"
      >
        <template #default="scope">
          <el-input
            v-model="scope.row.partsParameters"
            placeholder="请输入"
            @blur="blurFn(scope.$index, scope.row, 'partsParameters')"
            @focus="focusFn(scope.$index, scope.row, 'partsParameters')"
          />
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark" width="130">
        <template #default="scope">
          <el-input v-model="scope.row.remark" placeholder="请输入" />
        </template>
      </el-table-column>
      <el-table-column
        label="使用/安装说明书（附件）"
        prop="instructionManual"
        width="180"
      >
        <template #default="scope">
          <div style="display: flex; flex-direction: row">
            <div
              style="display: flex; flex-direction: column; margin-right: 5px"
            >
              <el-input
                v-model="scope.row.instructionManual"
                placeholder="请输入"
                style="margin-right: 10px"
                @blur="blurFn(scope.$index, scope.row, 'instructionManual')"
                @focus="focusFn(scope.$index, scope.row, 'instructionManual')"
              />
              <el-input
                v-if="scope.row.instructionManualPath"
                style="opacity: 0"
              />
            </div>
            <el-upload
              drag
              v-model:file-list="scope.row.instructionManualPathList"
              action="http://47.106.144.138:8081/facility/fileUpload"
              class="uploadStyle"
              :on-success="
                (res) => {
                  return handleExcelImportSuccess(
                    res,
                    'instructionManualPath',
                    scope.$index
                  );
                }
              "
              :limit="1"
              :before-remove="
                (res) =>
                  handleExcelImportRemove(
                    res,
                    'instructionManualPath',
                    scope.$index
                  )
              "
            >
              <div class="el-upload__text" style="width: 44px">上传</div>
            </el-upload>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="设备操作规程（附件）"
        prop="operatingProcedure"
        width="180"
      >
        <template #default="scope">
          <div style="display: flex; flex-direction: row">
            <div
              style="display: flex; flex-direction: column; margin-right: 5px"
            >
              <el-input
                v-model="scope.row.operatingProcedure"
                placeholder="请输入"
                style="margin-right: 10px"
                @blur="blurFn(scope.$index, scope.row, 'operatingProcedure')"
                @focus="focusFn(scope.$index, scope.row, 'operatingProcedure')"
              />
              <el-input
                v-if="scope.row.operatingProcedurePath"
                style="opacity: 0"
              />
            </div>
            <el-upload
              drag
              v-model:file-list="scope.row.operatingProcedurePathList"
              action="http://47.106.144.138:8081/facility/fileUpload"
              class="uploadStyle"
              :on-success="
                (res) => {
                  return handleExcelImportSuccess(
                    res,
                    'operatingProcedurePath',
                    scope.$index
                  );
                }
              "
              :limit="1"
              :before-remove="
                (res) =>
                  handleExcelImportRemove(
                    res,
                    'operatingProcedurePath',
                    scope.$index
                  )
              "
            >
              <div class="el-upload__text" style="width: 44px">上传</div>
            </el-upload>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="维修记录（附件）"
        prop="maintenanceRecord"
        width="180"
      >
        <template #default="scope">
          <div style="display: flex; flex-direction: row">
            <div
              style="display: flex; flex-direction: column; margin-right: 5px"
            >
              <el-input
                v-model="scope.row.maintenanceRecord"
                placeholder="请输入"
                style="margin-right: 10px"
                @blur="blurFn(scope.$index, scope.row, 'maintenanceRecord')"
                @focus="focusFn(scope.$index, scope.row, 'maintenanceRecord')"
              />
              <el-input
                v-if="scope.row.maintenanceRecordPath"
                style="opacity: 0"
              />
            </div>
            <el-upload
              drag
              v-model:file-list="scope.row.maintenanceRecordPathList"
              action="http://47.106.144.138:8081/facility/fileUpload"
              class="uploadStyle"
              :on-success="
                (res) => {
                  return handleExcelImportSuccess(
                    res,
                    'maintenanceRecordPath',
                    scope.$index
                  );
                }
              "
              :limit="1"
              :before-remove="
                (res) =>
                  handleExcelImportRemove(
                    res,
                    'maintenanceRecordPath',
                    scope.$index
                  )
              "
            >
              <div class="el-upload__text" style="width: 44px">上传</div>
            </el-upload>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="安装程序（附件）"
        prop="facilityInstaller"
        width="180"
      >
        <template #default="scope">
          <div style="display: flex; flex-direction: row">
            <div
              style="display: flex; flex-direction: column; margin-right: 5px"
            >
              <el-input
                v-model="scope.row.facilityInstaller"
                placeholder="请输入"
                style="margin-right: 10px"
                @blur="blurFn(scope.$index, scope.row, 'facilityInstaller')"
                @focus="focusFn(scope.$index, scope.row, 'facilityInstaller')"
              />
              <el-input
                v-if="scope.row.facilityInstallerPath"
                style="opacity: 0"
              />
            </div>
            <el-upload
              drag
              v-model:file-list="scope.row.facilityInstallerPathList"
              action="http://47.106.144.138:8081/facility/fileUpload"
              class="uploadStyle"
              :on-success="
                (res) => {
                  return handleExcelImportSuccess(
                    res,
                    'facilityInstallerPath',
                    scope.$index
                  );
                }
              "
              :limit="1"
              :before-remove="
                (res) =>
                  handleExcelImportRemove(
                    res,
                    'facilityInstallerPath',
                    scope.$index
                  )
              "
            >
              <div class="el-upload__text" style="width: 44px">上传</div>
            </el-upload>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="设备二维码（附件）"
        prop="twoDimensionalCode"
        width="130"
      >
        <template #default="scope">
          <el-upload
            drag
            action="http://47.106.144.138:8081/facility/fileUpload"
            class="uploadStyle"
            :on-success="
              (res) => {
                return handleExcelImportSuccess(
                  res,
                  'twoDimensionalCode',
                  scope.$index
                );
              }
            "
            :limit="1"
            :before-remove="
              (res) =>
                handleExcelImportRemove(res, 'twoDimensionalCode', scope.$index)
            "
          >
            <div class="el-upload__text">上传附件</div>
          </el-upload>
        </template>
      </el-table-column>
      <el-table-column
        label="设备照片（附件）"
        prop="ficilityPhoto"
        width="120"
      >
        <template #default="scope">
          <el-upload
            drag
            action="http://47.106.144.138:8081/facility/fileUpload"
            class="uploadStyle"
            :on-success="
              (res) => {
                return handleExcelImportSuccess(
                  res,
                  'ficilityPhoto',
                  scope.$index
                );
              }
            "
            :limit="1"
            :before-remove="
              (res) =>
                handleExcelImportRemove(res, 'ficilityPhoto', scope.$index)
            "
          >
            <div class="el-upload__text">上传附件</div>
          </el-upload>
        </template>
      </el-table-column>
      <el-table-column
        label="设备合同（附件）"
        prop="ficilityContract"
        width="120"
      >
        <template #default="scope">
          <el-upload
            drag
            action="http://47.106.144.138:8081/facility/fileUpload"
            class="uploadStyle"
            :on-success="
              (res) => {
                return handleExcelImportSuccess(
                  res,
                  'ficilityContract',
                  scope.$index
                );
              }
            "
            :limit="1"
            :before-remove="
              (res) =>
                handleExcelImportRemove(res, 'ficilityContract', scope.$index)
            "
          >
            <div class="el-upload__text">上传附件</div>
          </el-upload>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import equipmentHttp from "@/https/equipment.js";
import moment from "moment";
const emit = defineEmits(["closed"]);
let dataList = ref([]);

const facilityLevelList = ref([
  { label: "一级", value: "一级" },
  { label: "二级", value: "二级" },
  { label: "三级", value: "三级" },
]);
const facilityStateList = ref([
  { label: "在用", value: "1" },
  { label: "备用", value: "2" },
  { label: "维修", value: "3" },
  { label: "报废", value: "4" },
  { label: "其他", value: "5" },
]);
const props = defineProps({
  currentBatchEditInfo: Array,
});
dataList.value = props.currentBatchEditInfo;
console.log(props.currentBatchEditInfo);
dataList.value.forEach((item) => {
  let List1 = [];

  if (item.instructionManualPath) {
    List1.push({
      name: item.instructionManualPath,
      url: item.instructionManualPath,
    });
  }
  let List2 = [];
  if (item.operatingProcedurePath) {
    List2.push({
      name: item.operatingProcedurePath,
      url: item.operatingProcedurePath,
    });
  }
  let List3 = [];
  if (item.maintenanceRecordPath) {
    List3.push({
      name: item.maintenanceRecordPath,
      url: item.maintenanceRecordPath,
    });
  }
  let List4 = [];
  if (item.facilityInstallerPath) {
    List4.push({
      name: item.facilityInstallerPath,
      url: item.facilityInstallerPath,
    });
  }
  item.instructionManualPathList = List1;
  item.operatingProcedurePathList = List2;
  item.maintenanceRecordPathList = List3;
  item.facilityInstallerPathList = List4;
});

const depIdName = (id) => {
  return id == "1"
    ? "公司"
    : id == "2"
    ? "星沙厂"
    : id == "3"
    ? "城西厂"
    : id == "4"
    ? "城北厂"
    : "城南厂";
};

const handleExcelImportSuccess = (res, type, rowIndex) => {
  console.log(res, type, rowIndex, dataList[rowIndex]);
  dataList.value[rowIndex][type] = res.data;
};
const handleExcelImportRemove = (res, type, rowIndex) => {
  dataList.value[rowIndex][type] = "";
};
const batchEditDetailSubmit = () => {
  let hasMsg = true;
  for (let i = 0; i < dataList.value.length; i++) {
    if (dataList.value[i].facilityName == "") {
      ElMessage({
        message: "设备名称不能为空！",
        type: "warning",
      });
      hasMsg = false;
      break;
    }
    if (dataList.value[i].facilityLocations == "") {
      ElMessage({
        message: "设备地点不能为空！",
        type: "warning",
      });
      hasMsg = false;
      break;
    }
  }
  if (hasMsg) {
    dataList.value.forEach((item) => {
      item.guaranteeTime = item.guaranteeTime
        ? moment(item.guaranteeTime).format("YYYY-MM-DD")
        : "";
      item.scrapTime = item.scrapTime
        ? moment(rulitemeForm.scrapTime).format("YYYY-MM-DD")
        : "";
      item.startTime = item.startTime
        ? moment(item.startTime).format("YYYY-MM-DD")
        : "";
      item.purchaseTime = item.purchaseTime
        ? moment(item.purchaseTime).format("YYYY-MM-DD")
        : "";
    });
    equipmentHttp.batchUpdateFacility(dataList.value).then((res) => {
      console.log(res);
      if (res.data.code === 200) {
        ElMessage({
          message: "修改成功",
          type: "success",
        });
        emit("closed");
      } else {
        ElMessage({
          message: "修改失败",
          type: "error",
        });
      }
    });
  }
};

const blurFn = (row, item, type) => {
  console.log(row, item, type);
};
const focusFn = (rowIndex, item, type) => {
  let columnList = [
    "depId",
    "facilitySort",
    "facilityName",
    "facilityLevel",
    "specificationModel",
    "facilitySerialNumber",
    "facilityLocations",
    "assetNumber",
    "facilityState",
    "facilityNumbers",
    "unit",
    "facilitySupplier",
    "franchising",
    "purchasePrice",
    "purchaseTime",
    "startTime",
    "guaranteeTime",
    "scrapTime",
    "networking",
    "technicalParameter",
    "partsParameters",
    "remark",
    "instructionManual",
    "operatingProcedure",
    "maintenanceRecord",
    "facilityInstaller",
  ];
  let currentIndex = columnList.findIndex((item) => {
    return item == type;
  });
  console.log(currentIndex, type);
  window.addEventListener(
    "paste",
    (event) => {
      event = event || window.event;
      const clipdata = event.clipboardData || window.clipboardData;
      const value = clipdata.getData("text/plain");
      console.log(value);

      let clipboardList = value.split("\r\n");
      clipboardList.forEach((item, ind) => {
        let itemList = item.split("\t");
        clipboardList[ind] = itemList;
      });
      setTimeout(() => {
        console.log("1111", clipboardList);
        clipboardList.forEach((item, ind) => {
          item.forEach((n, m) => {
            if (m + currentIndex <= columnList.length) {
              n = n.replace(/\s+/g, "");
              n = n.replace(/(\r\n|\n|\r)/gm, "");
              n = n.replace("“", "");
              n = n.replace("”", "");
              n = n.replace(/\"(.*?)\"/g, "$1");
              dataList.value[rowIndex + ind][columnList[m + currentIndex]] = n;
            }
          });
        });
      });
    },
    { once: true }
  );
};
defineExpose({
  batchEditDetailSubmit,
});
</script>

<style scoped lang="less">
/deep/.el-upload-dragger {
  height: 32px;
  line-height: 32px;
  padding: 0 !important;
}
/deep/.el-upload-list {
  margin: 0 !important;
  position: absolute;
  right: 0;
  width: 100%;
}
.el-upload__text {
  color: #999;
  font-size: 13px;
}
// /deep/.el-upload {
//   width: 80px;
//   margin: 0 auto;
// }
</style>
